<template>
  <EcDialog v-model="dialogVisible" :auto-height="true" class="form-dialog">
    <!-- 标题 -->
    <template #title>
      <div class="dialog-title">
        <SvgIcon :icon="dialogIconMap[dialogMode]"/>
        <span>{{ dialogModeMap[dialogMode] + ' - ' + dialogTitle }}</span>
      </div>
    </template>

    <!-- 表单数据 -->
    <el-form ref="formRef"
             v-loading="dataLoading"
             :disabled="readonly"
             :model="formData"
             :rules="formRules"
             class="full-form"
             label-width="auto"
             status-icon>

      <el-form-item label="字典：" prop="dict_type_id">
        <el-select v-model="formData.dict_type_id" :disabled="readonly || dictTypeId > 0" placeholder="请选择字典" value="" style="max-width: 20rem">
          <el-option v-for="item in dictTypeList" :key="item.id" :label="item.name + ' / ' + item.type" :value="item.id"/>
        </el-select>
      </el-form-item>

      <el-form-item label="标签：" prop="dict_label">
        <el-input v-model="formData.dict_label" placeholder="请输入字典标签"/>
      </el-form-item>

      <el-form-item label="键值：" prop="dict_value">
        <el-input v-model="formData.dict_value" placeholder="请输入字典键值"/>
      </el-form-item>

      <el-form-item label="样式：" prop="list_class">
        <el-select v-model="formData.list_class" placeholder="请选择样式" value="" style="width: 50%">
          <el-option key="primary" value="primary" label="主要"/>
          <el-option key="success" value="success" label="成功"/>
          <el-option key="info" value="info" label="信息"/>
          <el-option key="warning" value="warning" label="警告"/>
          <el-option key="danger" value="danger" label="危险"/>
        </el-select>
        <el-tag style="margin-left: 1rem" :type="formData.list_class">样式预览</el-tag>
      </el-form-item>

      <el-form-item label="排序：" prop="order_num">
        <el-input-number v-model="formData.order_num" controls-position="right" :min="0" label="字典排序"/>
      </el-form-item>

      <el-form-item label="状态：" prop="enabled">
        <el-radio-group v-model="formData.enabled" :disabled="readonly">
          <el-radio-button :value="true">启用</el-radio-button>
          <el-radio-button :value="false">停用</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="备注：" prop="remark">
        <el-input v-model="formData.remark" :autosize="{ minRows: 2}" placeholder="请输入字典备注" type="textarea"/>
      </el-form-item>
    </el-form>

    <!-- 底部操作区域 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button :loading="dataLoading" @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="!readonly" v-permission="['sys:dict:create', 'sys:dict:update']" :loading="dataLoading" type="primary" @click="onSubmitForm()">确 定</el-button>
      </span>
    </template>
  </EcDialog>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';
import { ElLoading, ElMessage, ElNotification, FormInstance, FormRules } from 'element-plus';
import { SysDictData, sysDictDataInfo, sysDictDataSaveOrUpdate, SysDictType, sysDictTypeAll } from '@/api/api-sys.ts';
import useDialog from '@/hooks/use-dialog.ts';
import { EcDialog } from '@/components/dialog';
import { SvgIcon } from '@/components/icon';

defineOptions({name: 'SysDictForm'});

const formRef = ref<FormInstance>();
const formLoading = ref(false) // 表单是否加载中
const {dialogVisible, dialogTitle, dialogMode, dialogModeMap, dialogIconMap} = useDialog(false);

/** 默认表单数据 */
const defaultForm: SysDictData = <SysDictData>{id: 0, enabled: true, order_num: 0};

// 表单数据
const formData = ref({...defaultForm});

// 表单验证规则
const formRules = reactive<FormRules>({
  dict_type_id: [{required: true, message: '字典不能为空', trigger: 'change'}],
  dict_label: [{required: true, message: '字典标签不能为空', trigger: 'change'}],
  dict_value: [{required: true, message: '字典键值不能为空', trigger: 'change'}],
  list_class: [{required: true, message: '请选择回显样式', trigger: 'change'}],
});

/** 判断数据是否处于加载中 */
const dataLoading = computed(() => {
  return formLoading.value;
})

/** 是否只读 */
const readonly = computed(() => {
  return dialogMode.value == 0;
});

/** 是否新增 */
const isCreate = computed(() => {
  return dialogMode.value == 1 || !formData.value.id || formData.value.id <= 0;
});

const props = defineProps({
  dictTypeId: {
    type: Number,
    required: true
  }
});

/** 打开弹窗 */
const open = async (mode: number, id?: number) => {
  dialogMode.value = mode;
  dialogTitle.value = '字典数据';
  dialogVisible.value = true;
  // 重置表单
  handleFormReset();
  // 加载字段类型数据
  await initDictTypeData();
  // 设置字段类型编号
  formData.value.dict_type_id = props.dictTypeId || undefined;

  // 加载信息
  if (id) {
    formLoading.value = true
    try {
      // 加载用户数据
      const {data} = await sysDictDataInfo(id)
      formData.value = data;
    } finally {
      formLoading.value = false
    }
  }
}
// 提供 open 方法，用于打开弹窗
defineExpose({open})

/** 表单提交 */
const emit = defineEmits(['success']);
const onSubmitForm = async () => {
  await formRef.value?.validate((valid, fields) => {
    if (!valid) {
      ElMessage({type: 'error', message: '请检查是否有必填项未完善',});
      return
    }
    const loading = ElLoading.service({
      lock: true,
      text: '正在提交中...',
      background: 'rgba(0, 0, 0, 0.2)'
    })
    sysDictDataSaveOrUpdate(formData.value, isCreate.value).then(response => {
      // 提示信息
      ElNotification({title: '成功', message: '操作完成', type: 'success', duration: 2000})
      // 发送操作成功的事件
      emit('success')
      // 隐藏窗口
      dialogVisible.value = false
    }).finally(() => loading.close())

  });
};

/** 重置表单 */
const handleFormReset = () => {
  // 重置表单数据
  formData.value = {...defaultForm};
  // 重置界面表单数据
  formRef.value?.resetFields();
};

/** 初始化字典数据 */
const dictTypeList = ref<SysDictType[]>([]);
const initDictTypeData = async () => {
  dictTypeList.value = [];
  const {data} = await sysDictTypeAll();
  dictTypeList.value = data;
};
</script>

<style lang="scss" scoped>
.form-dialog {
  .el-select,
  .el-input-number {
    max-width: 13rem;
  }
}
</style>
